window.addEventListener('load', function(){


    let usernameRef = document.getElementById('username');
let passwordRef = document.getElementById('password');
let submitBtn = document.getElementById('submit');
let messageRef = document.getElementById('message-ref');

let isUsernameValid = () =>{
    // 用户名长度应该超过三个字符且以字母开头 
    // 正则 /gi 匹配所有可能的值 忽略大小写
    const usernameRegex=/^[a-zA-Z][a-zA-Z0-9]{3,32}/gi;
    return usernameRegex.test(usernameRef.value);
};


let isPasswordValid = () =>{
    // 长度应该为8位  至少包括数字 特殊字符 小写 大写
    
    const passwordRegex=/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/gm;
    return passwordRegex.test(passwordRef.value);
};

usernameRef.addEventListener('input',() => {
    if(!isUsernameValid()){
        // 用户名不合法
        messageRef.style.visibility = 'hidden';
        usernameRef.style.cssText = 'border-color:#fe2e2e; background-color:#ffc2c2';
    }else{
        usernameRef.style.cssText = 'border-color:#34bd34; background-color:#c2ffc2';

    }
});


passwordRef.addEventListener('input',() =>{
    if(!isPasswordValid()){
        // 密码不合法
        messageRef.style.visibility = 'hidden';
        passwordRef.style.cssText = 'border-color:#fe2e2e; background-color:#ffc2c2';
    }else{
        passwordRef.style.cssText = 'border-color:#34bd34; background-color:#c2ffc2';

    }
});




submitBtn.addEventListener('mouseover', () => {
    if(!isUsernameValid() || !isPasswordValid()){
        // let containerRect = document.querySelector('.container').getBoundingClientRect();
        // let submitRect = submitBtn.getBoundingClientRect();
        // let offset = submitRect.left - containerRect.left;
        // console.log(offset);
        submitBtn.addEventListener('mouseover',() =>{
            submitBtn.disabled = true;
            submitBtn.style.backgroundColor = 'red';
            this.alert('error');
        });
        
    }
    else{
        // submitBtn.disabled = flase;
        // submitBtn.style.backgroundColor = '#ffc13d';
        // submitBtn.style.transform = 'translateX(0)';

        submitBtn.addEventListener('click',() => {
            messageRef.style.visibility = 'visible';
            
        });
    }


});




})


